<template>
  <div class="bor">
      <div class="cont" v-for="(v,i) in arr" :key="i">
          <div class="nrlt">
              <img :src="v.img" alt="">
              <h4>{{v.biao}}</h4>
              <p class="pon">上门</p>
              <strong>{{v.qian}}</strong><br>
              <span>万店联名卡</span>
              <div class="xiao">
                  <div class="xlt">
                      <img src="qiaoxiaodong/bg1.png" alt="">
                      <span>{{v.gong}}</span>
                  </div>
                  <div class="xrg">
                      <button>抢购</button>
                  </div>
              </div>
          </div>
          <div class="nrrg">
              <img :src="v.img2" alt="">
              <h4>{{v.biao2}}</h4>
              <p>上门</p>
              <strong>{{v.qian2}}</strong><br>
              <span>万店联名卡</span>
              <div class="xiao">
                  <div class="xlt">
                      <img src="qiaoxiaodong/bg1.png" alt="">
                      <span>{{v.gong2}}</span>
                  </div>
                  <div class="xrg">
                      <button>抢购</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    data() {
        return {
            arr:[],
        }
    },
    mounted(){
        getlink("/data/list/movie").then((ok)=>{
            console.log(ok.data);
            this.arr = ok.data;
            console.log(this.arr);
        })
    },
}
</script>

<style scoped>
    .bor {
        background: #eeeeee;
    }
    .cont {
        width: 95%;
        background: #fff;
        margin: 0 auto;
        display: flex;
        margin-top: 0.2rem;
        background: #eeeeee;
    }
    .nrlt {
        background: #fff;
    }
    .cont img {
        width: 3.4rem;
        height: 3.4rem;
        margin-left: 0.1rem;
        
    }
    .cont h4 {
        font-size: 0.3rem;
        margin-top: 0.2rem;
    }
    .cont .pon {
        width: 0.6rem;
        height: 0.4rem;
        font-size: 0.28rem;
        margin-top: 1rem;
        color: #4ba7f8;
        border: 1px solid #4ba7f8;
        margin-left: 0.1rem;
    }
    
    .cont strong {
        display: inline-block;
        margin-top: 0.2rem;
        color: red;
        font-size: 0.4rem;
    }
    .cont span {
        display: inline-block;
        margin-top: 0.1rem;
        width: 1.5rem;
        height: 0.4rem;
        font-size: 0.28rem;
        background: #313232;
        color: #e7d7c2;
        border-radius: 0.05rem;
    }
    .nrrg {
        margin-left: 0.1rem;
        background: #fff;
    }
    .nrrg p {
        width: 0.6rem;
        height: 0.4rem;
        font-size: 0.28rem;
        margin-top: 0.6rem;
        color: #4ba7f8;
        border: 1px solid #4ba7f8;
        margin-left: 0.1rem;
    }
    .xiao {
        width: 3.4rem;
        height: 0.9rem;
        display: flex;
        align-items: center;
        margin-top: 0.2rem;
    }
    .xiao img {
        width: 0.6rem;
        height: 0.6rem;
    }
    .xiao span {
        position: relative;
        font-size: 0.2rem;
        background: none;
        color: #494949;
        top: -0.25rem;
    }
    .xrg button {
        width: 1.1rem;
        height: 0.5rem;
        background: #de443b;
        border-radius: 0.5rem;
        border: 1px solid #de443b;
        margin-top: -0.2rem;
        color: #fff;
    }
</style>